<script lang="ts" setup name="QrCodeForm">
import logoImg from '@/assets/logo.png'

import LoginFormTitle from './LoginFormTitle.vue'
import { LoginStateEnum, useLoginState } from './useLogin'

const { t } = useI18n()
const { handleBackLogin, getLoginState } = useLoginState()
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE)

const loginUrl = ref('https://www.baidu.com')
</script>

<template>
  <el-row v-show="getShow" class="login-form">
    <el-col :span="24">
      <LoginFormTitle style="width: 100%" />
    </el-col>
    <el-col :span="24">
      <el-card class="mb-10px text-center" shadow="hover">
        <QrCode :logo="logoImg" :text="loginUrl" />
      </el-card>
    </el-col>
    <el-divider class="enter-x leading-none">{{ t('sign', 'scanQrCode') }}</el-divider>
    <el-col :span="24">
      <div class="mt-15px w-[100%]">
        <CButton :title="t('sign', 'backLogin')" class="other-button w-[100%]" @click="handleBackLogin()" />
      </div>
    </el-col>
  </el-row>
</template>
